<template>
 <div class="yingmoo-media">
   <ym-header></ym-header>
   <ym-medianav></ym-medianav>
   <ym-secondnav></ym-secondnav>
    <div class="ym-lunbo">
      <el-carousel indicator-position="inside">
        <el-carousel-item v-for="(v,i) in banners" :key="i">
          <img :src="v.imgpath" />
        </el-carousel-item>
      </el-carousel>
    </div>
<!--  热门媒体  -->
    <div class="yingmoo-column yingmoo-xxx">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">热门媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
      <div class="column-content">
        <dl class="media-model" v-for="n in hot_media" :key="n">
          <dt>
            <img width="222px" height="198px" :src="n.imgpath" />
          </dt>
          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
          <dd class="media-text-secend">￥{{n.price}}</dd>
          <dd class="media-text-city">{{n.remark}}</dd>
        </dl>
      </div>
    </div>
<!--  商住楼宇媒体  -->
    <div class="yingmoo-passenger-media">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">商住楼宇媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys">
          <span>北京</span>
          <span>上海</span>
          <span>广州</span>
          <span>深圳</span>
          <span>重庆</span>
          <span>武汉</span>
          <span>郑州</span>
          <span>长沙</span>
          <span>杭州</span>
          <span>南京</span>
        </p>
      </div>
      <div class="column-center">
        <div class="center-left">
          <ul class="activity-left">
            <li @mouseenter='shoq=1'>框架</li>
            <li @mouseenter='shoq=0,show=1'>数码海报</li>
            <li @mouseenter='shoq=0,show=0,shor=1'>LED显示屏</li>
            <li @mouseenter='shoq=0,show=0,shor=0,shot=1'>LCD视频</li>
            <li @mouseenter='shoq=0,show=0,shor=0,shot=0,shoy=1'>灯箱</li>
            <li @mouseenter='shoq=0,show=0,shor=0,shot=0,shoy=0,shou=1'>电梯门贴</li>
            <li @mouseenter='shoq=0,show=0,shor=0,shot=0,shoy=0,shou=0,shoi=1'>道闸</li>
            <li @mouseenter='shoq=0,show=0,shor=0,shot=0,shoy=0,shou=0,shoi=0,shoo=1'>滚动灯箱</li>
          </ul>
        </div>
        <div class="center-right">
          <!--商住楼宇-框架-->
          <div class="centers-move" @mouseenter='shoq=1' @mouseleave='shoq=1' v-show='shoq==1'>
            <div class="column-content">
	            <ul>
	            	<li class="media-model" v-for="n in list11" :key="n">
		              <dl>
		                <dt>
		                  <img width="222px" height="198px" :src="n.imgpath" />
		                </dt>
		                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
		                <dd class="media-text-secend">￥{{n.price}}</dd>
		                <dd class="media-text-city">{{n.remark}}</dd>
		              </dl>            		
	            	</li>
	            </ul>
            </div>
          </div>
          
          <!--商住楼宇-数码海报-->
          <div class="centers-move" @mouseenter='show=1' @mouseleave='show=1' v-show='show==1'>
            <div class="column-content">
              <ul>
            	<li class="media-model" v-for="n in list12" :key="n">
	              <dl>
	                <dt>
	                  <img width="222px" height="198px" :src="n.imgpath" />
	                </dt>
	                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	                <dd class="media-text-secend">￥{{n.price}}</dd>
	                <dd class="media-text-city">{{n.remark}}</dd>
	              </dl>            		
            	</li>
              </ul>
            </div>
          </div>
          
          <!--商住楼宇-LED-->
          <div class="centers-move" @mouseenter='shor=1' @mouseleave='shor=1' v-show='shor==1'>
            <div class="column-content">
              <ul>
            	<li class="media-model" v-for="n in list13" :key="n">
	              <dl>
	                <dt>
	                  <img width="222px" height="198px" :src="n.imgpath" />
	                </dt>
	                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	                <dd class="media-text-secend">￥{{n.price}}</dd>
	                <dd class="media-text-city">{{n.remark}}</dd>
	              </dl>            		
            	</li>
              </ul>
            </div>
          </div>
          
          <!--商住楼宇-LCD-->
          <div class="centers-move" @mouseenter='shot=1' @mouseleave='shot=1' v-show='shot==1'>
            <div class="column-content">
              <ul>
            	<li class="media-model" v-for="n in list14" :key="n">
	              <dl>
	                <dt>
	                  <img width="222px" height="198px" :src="n.imgpath" />
	                </dt>
	                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	                <dd class="media-text-secend">￥{{n.price}}</dd>
	                <dd class="media-text-city">{{n.remark}}</dd>
	              </dl>            		
            	</li>
              </ul>
            </div>
          </div>
          
          <!--商住楼宇-灯箱-->
          <div class="centers-move" @mouseenter='shoy=1' @mouseleave='shoy=1' v-show='shoy==1'>
            <div class="column-content">
              <ul>
            	<li class="media-model" v-for="n in list15" :key="n">
	              <dl>
	                <dt>
	                  <img width="222px" height="198px" :src="n.imgpath" />
	                </dt>
	                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	                <dd class="media-text-secend">￥{{n.price}}</dd>
	                <dd class="media-text-city">{{n.remark}}</dd>
	              </dl>            		
            	</li>
              </ul>
            </div>
            <div class="column-content">
              <ul>
            	<li class="media-model" v-for="n in list16" :key="n">
	              <dl>
	                <dt>
	                  <img width="222px" height="198px" :src="n.imgpath" />
	                </dt>
	                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	                <dd class="media-text-secend">￥{{n.price}}</dd>
	                <dd class="media-text-city">{{n.remark}}</dd>
	              </dl>            		
            	</li>
              </ul>
            </div>
          </div>
          
          <!--商住楼宇-电梯门贴-->
          <div class="centers-move" @mouseenter='shou=1' @mouseleave='shou=1' v-show='shou==1'>
            <div class="column-content">
              <ul>
            	<li class="media-model" v-for="n in list16" :key="n">
	              <dl>
	                <dt>
	                  <img width="222px" height="198px" :src="n.imgpath" />
	                </dt>
	                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	                <dd class="media-text-secend">￥{{n.price}}</dd>
	                <dd class="media-text-city">{{n.remark}}</dd>
	              </dl>            		
            	</li>
              </ul>
            </div>
          </div>
          
          <!--商住楼宇-道闸-->
          <div class="centers-move" @mouseenter='shoi=1' @mouseleave='shoi=1' v-show='shoi==1'>
            <div class="column-content">
              <ul>
            	<li class="media-model" v-for="n in list17" :key="n">
	              <dl>
	                <dt>
	                  <img width="222px" height="198px" :src="n.imgpath" />
	                </dt>
	                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	                <dd class="media-text-secend">￥{{n.price}}</dd>
	                <dd class="media-text-city">{{n.remark}}</dd>
	              </dl>            		
            	</li>
              </ul>
            </div>
          </div>
          
          <!--商住楼宇-滚动灯箱-->
          <div class="centers-move" @mouseenter='shoo=1' @mouseleave='shoo=1' v-show='shoo==1'>
            <div class="column-content">
              <ul>
            	<li class="media-model" v-for="n in list18" :key="n">
	              <dl>
	                <dt>
	                  <img width="222px" height="198px" :src="n.imgpath" />
	                </dt>
	                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	                <dd class="media-text-secend">￥{{n.price}}</dd>
	                <dd class="media-text-city">{{n.remark}}</dd>
	              </dl>            		
            	</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--  picture广告位  -->
    <div class="yingmoo-picture">
        <img v-for="v in banner" :src="v.imgpath" :key="v"/>
    </div>
<!--  社区楼宇媒体  -->
    <div class="yingmoo-passenger-media">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">社区楼宇媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys">
          <span>北京</span>
          <span>上海</span>
          <span>广州</span>
          <span>深圳</span>
          <span>重庆</span>
          <span>武汉</span>
          <span>郑州</span>
          <span>长沙</span>
          <span>杭州</span>
          <span>南京</span>
        </p>
      </div>
      <div class="column-center">
        <div class="center-left">
          <ul class="activity-left">
            <li @mouseenter='shos=1'>框架</li>
            <li @mouseenter='shos=0,shon=1'>数码海报</li>
            <li @mouseenter='shon=0,shos=0,shom=1'>LED显示屏</li>
            <li @mouseenter='shon=0,shos=0,shom=0,shoa=1'>LCD视频</li>
            <li @mouseenter='shon=0,shos=0,shom=0,shoa=0,shob=1'>灯箱</li>
            <li @mouseenter='shon=0,shos=0,shom=0,shoa=0,shob=0,shoc=1'>电梯门贴</li>
            <li @mouseenter='shon=0,shos=0,shom=0,shoa=0,shob=0,shoc=0,shod=1'>道闸</li>
            <li @mouseenter='shon=0,shos=0,shom=0,shoa=0,shob=0,shoc=0,shod=0,shoe=1'>滚动灯箱</li>
          </ul>
        </div>
        <div class="center-right">
    	<!--社区楼宇媒体-框架-->
          <div class="centers-move" @mouseenter='shos=1' @mouseleave='shos=1' v-show='shos==1'>
            <div class="column-content">
              <ul>
            	<li class="media-model" v-for="n in list21" :key="n">
	              <dl>
	                <dt>
	                  <img width="222px" height="198px" :src="n.imgpath" />
	                </dt>
	                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	                <dd class="media-text-secend">￥{{n.price}}</dd>
	                <dd class="media-text-city">{{n.remark}}</dd>
	              </dl>            		
            	</li>
              </ul>
            </div>
          </div>
		<!--社区楼宇媒体-数码海报-->          
		  <div class="centers-move" @mouseenter='shon=1' @mouseleave='shon=1' v-show='shon==1'>
            <div class="column-content">
              <ul>
            	<li class="media-model" v-for="n in list22" :key="n">
	              <dl>
	                <dt>
	                  <img width="222px" height="198px" :src="n.imgpath" />
	                </dt>
	                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	                <dd class="media-text-secend">￥{{n.price}}</dd>
	                <dd class="media-text-city">{{n.remark}}</dd>
	              </dl>            		
            	</li>
              </ul>
            </div>
          </div>
		<!--社区楼宇媒体-LED-->          
		  <div class="centers-move" @mouseenter='shom=1' @mouseleave='shom=1' v-show='shom==1'>
            <div class="column-content">
              <ul>
            	<li class="media-model" v-for="n in list23" :key="n">
	              <dl>
	                <dt>
	                  <img width="222px" height="198px" :src="n.imgpath" />
	                </dt>
	                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	                <dd class="media-text-secend">￥{{n.price}}</dd>
	                <dd class="media-text-city">{{n.remark}}</dd>
	              </dl>            		
            	</li>
              </ul>
            </div>
          </div>
        <!--社区楼宇媒体-LCD-->
		  <div class="centers-move" @mouseenter='shoa=1' @mouseleave='shoa=1' v-show='shoa==1'>
            <div class="column-content">
              <ul>
            	<li class="media-model" v-for="n in list24" :key="n">
	              <dl>
	                <dt>
	                  <img width="222px" height="198px" :src="n.imgpath" />
	                </dt>
	                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	                <dd class="media-text-secend">￥{{n.price}}</dd>
	                <dd class="media-text-city">{{n.remark}}</dd>
	              </dl>            		
            	</li>
              </ul>
            </div>
          </div>
        <!--社区楼宇媒体-灯箱-->
		  <div class="centers-move" @mouseenter='shob=1' @mouseleave='shob=1' v-show='shob==1'>
            <div class="column-content">
              <ul>
            	<li class="media-model" v-for="n in list25" :key="n">
	              <dl>
	                <dt>
	                  <img width="222px" height="198px" :src="n.imgpath" />
	                </dt>
	                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	                <dd class="media-text-secend">￥{{n.price}}</dd>
	                <dd class="media-text-city">{{n.remark}}</dd>
	              </dl>            		
            	</li>
              </ul>
            </div>
          </div>
        <!--社区楼宇媒体-电梯门贴-->
		  <div class="centers-move" @mouseenter='shoc=1' @mouseleave='shoc=1' v-show='shoc==1'>
            <div class="column-content">
              <ul>
            	<li class="media-model" v-for="n in list26" :key="n">
	              <dl>
	                <dt>
	                  <img width="222px" height="198px" :src="n.imgpath" />
	                </dt>
	                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	                <dd class="media-text-secend">￥{{n.price}}</dd>
	                <dd class="media-text-city">{{n.remark}}</dd>
	              </dl>            		
            	</li>
              </ul>
            </div>
          </div>
        <!--社区楼宇媒体-道闸-->
		  <div class="centers-move" @mouseenter='shod=1' @mouseleave='shod=1' v-show='shod==1'>
            <div class="column-content">
              <ul>
            	<li class="media-model" v-for="n in list27" :key="n">
	              <dl>
	                <dt>
	                  <img width="222px" height="198px" :src="n.imgpath" />
	                </dt>
	                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	                <dd class="media-text-secend">￥{{n.price}}</dd>
	                <dd class="media-text-city">{{n.remark}}</dd>
	              </dl>            		
            	</li>
              </ul>
            </div>
          </div>
        <!--社区楼宇媒体-滚动灯箱-->
		  <div class="centers-move" @mouseenter='shoe=1' @mouseleave='shoe=1' v-show='shoe==1'>
            <div class="column-content">
              <ul>
            	<li class="media-model" v-for="n in list28" :key="n">
	              <dl>
	                <dt>
	                  <img width="222px" height="198px" :src="n.imgpath" />
	                </dt>
	                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
	                <dd class="media-text-secend">￥{{n.price}}</dd>
	                <dd class="media-text-city">{{n.remark}}</dd>
	              </dl>            		
            	</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--  最新加入  -->
    <div class="yingmoo-template">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">最新加入</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
      <div class="column-content">
        <ul>
          <li class="media-model" style="float: left;margin: 8px;" v-for="n in lastest" :key="n">
              <dl>
                <dt>
                  <img width="222px" height="198px" :src="n.imgpath" />
                </dt>
                <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
                <dd class="media-text-secend">￥{{n.price}}</dd>
                <dd class="media-text-city">{{n.remark}}</dd>
              </dl>            		
          </li>
        </ul>
      </div>
    </div>
    <ym-footer></ym-footer>
 </div>
</template>
<script>
import ymHeader from "@/components/ymHeader.vue";
import ymMedianav from "@/components/ymMedianav.vue";
import ymFooter from "@/components/ymFooter.vue";
import ymSecondnav from "@/components/ymSecondnav.vue";
export default {
  name: "yingmoo-media",
  components: {
    ymHeader,
    ymMedianav,
    ymSecondnav,
    ymFooter
  },
  data() {
    return {
      requestAddr: this.GLOBAL.addr,
      /* banner数据，方便修改 */
      banners: [
        {
          imgUrl: require("@/assets/ym-media/building-lunbo.png")
        },
        {
          imgUrl: require("@/assets/ym-media/building-lunbo.png")
        },
        {
          imgUrl: require("@/assets/ym-media/building-lunbo.png")
        }
      ],
      shos: 1,
      shon: 0,
      shom: 0,
      shoa: 0,
      shob: 0,
      shoc: 0,
      shod: 0,
      shoe: 0,
      shoq: 1,
      show: 0,
      shor: 0,
      shot: 0,
      shoy: 0,
      shou: 0,
      shoi: 0,
      shoo: 0,
      model: [
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "看板"
        },
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "看板"
        },
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "看板"
        },
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "看板"
        },
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "看板"
        }
      ],
      models: [
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "廊桥",
          modellooks: "LED显示屏"
        },
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "廊桥",
          modellooks: "LED显示屏"
        },
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "廊桥",
          modellooks: "LED显示屏"
        },
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "廊桥",
          modellooks: "LED显示屏"
        }
      ],
      hot_media: [],

      list11: [],
      list12: [],
      list13: [],
      list14: [],
      list15: [],
      list16: [],
      list17: [],
      list18: [],
      list19: [],

      banner: [],

      list21: [],
      list22: [],
      list23: [],
      list24: [],
      list25: [],
      list26: [],
      list27: [],
      list28: [],
      list29: [],

      lastest: []
    };
  },
  mounted() {
    this.getList(70, 3); //轮播图
    this.getList(71, 5); //热门媒体
    //商住楼宇媒体
    this.getList(72, 8);
    this.getList(73, 8);
    this.getList(74, 8);
    this.getList(75, 8);
    this.getList(76, 8);
    this.getList(77, 8);
    this.getList(78, 8);
    this.getList(79, 8);
    //图片广告
    this.getList(80, 1);
    //社区楼宇媒体
    this.getList(81, 8);
    this.getList(82, 8);
    this.getList(83, 8);
    this.getList(84, 8);
    this.getList(85, 8);
    this.getList(86, 8);
    this.getList(87, 8);
    this.getList(88, 8);
    //最新加入
    this.getList(89, 10);
  },
  methods: {
    getList: function(adid, limit) {
      this.$http({
        url:
          this.requestAddr +
          "/GetJson/get/adshow?adid=" +
          adid +
          "&limit=" +
          limit,
        method: "JSONP",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        jsonp: "callbackparam"
      })
        .then(res => {
          /*console.log(res.data);*/
          if (res.data != null) {
            if (adid == 70) {
              this.banners = res.data;
            }
            if (adid == 71) {
              this.hot_media = res.data;
            }

            if (adid == 72) {
              this.list11 = res.data;
            }
            if (adid == 73) {
              this.list12 = res.data;
            }
            if (adid == 74) {
              this.list13 = res.data;
            }
            if (adid == 75) {
              this.list14 = res.data;
            }
            if (adid == 76) {
              this.list15 = res.data;
            }
            if (adid == 77) {
              console.log(res.data);
              this.list16 = res.data;
            } //商住电梯门贴
            if (adid == 78) {
              this.list17 = res.data;
            } //商住道闸
            if (adid == 79) {
              this.list18 = res.data;
            } //商住滚动灯箱

            if (adid == 80) {
              this.banner = res.data;
            } //最新加入

            if (adid == 81) {
              this.list21 = res.data;
            } //楼宇框架
            if (adid == 82) {
              this.list22 = res.data;
            }
            if (adid == 83) {
              this.list23 = res.data;
            }
            if (adid == 84) {
              this.list24 = res.data;
            }
            if (adid == 85) {
              this.list25 = res.data;
            }
            if (adid == 86) {
              this.list26 = res.data;
            }
            if (adid == 87) {
              this.list27 = res.data;
            }
            if (adid == 88) {
              this.list28 = res.data;
            }

            if (adid == 89) {
              this.lastest = res.data;
            }
          }
        })
        .catch();
    }
  }
};
</script>

<style scoped lang="less">
.yingmoo-media {
  width: 100%;
  background-color: #f3f9ff;
  .ym-lunbo {
    width: 100%;
    height: 450px;
    position: absolute;
    top: 234px;
    left: 0;
    z-index: 1;
  }
  .yingmoo-xxx {
    width: 1200px;
    height: 357px;
    margin: 0 auto;
    background-color: transparent;
    margin-top: 30px;
    .column-navbar {
      height: 44px;
      line-height: 44px;
      position: relative;
      &.grey {
        background-color: #e6e6e6;
      }
      .column-title {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 247px;
        color: #fbb03b;
        font-size: 18px;
        background-color: #036eb7;
        .column-icon {
          margin-left: 26px;
        }
        .column-arrow {
          position: absolute;
          right: -26px;
          top: 0;
        }
      }
      .column-citys {
        line-height: 44px;
        width: 640px;
        background: none;
        color: #999999;
        margin-right: 30px;
        float: right;
        span {
          padding-left: 20px;
          padding-right: 20px;
          font-size: 14px;
        }
      }
    }
    .column-content {
      width: 1200px;
      background-color: transparent;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      .media-model {
        width: 224px;
        height: 291px;
        margin: 8px;

        dd {
          background-color: white;
          height: 24px;
          line-height: 24px;
          padding-left: 10px;
        }
        .media-text-first {
          font-size: 14px;
          padding-top: 9px;
          overflow: hidden;
          text-overflow: clip;
          height: 24px;
        }
        .media-text-secend {
          font-size: 12px;
          color: red;
        }
        .media-text-city {
          font-size: 12px;
          color: #999999;
          padding-bottom: 6px;
          span {
            padding-left: 15px;
          }
        }
      }
    }
  }
  .yingmoo-passenger-media {
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
    .column-navbar {
      height: 44px;
      line-height: 44px;
      position: relative;
      &.grey {
        background-color: #e6e6e6;
      }
      .column-title {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 247px;
        color: #fbb03b;
        font-size: 18px;
        background-color: #036eb7;
        .column-icon {
          margin-left: 26px;
        }
        .column-arrow {
          position: absolute;
          right: -26px;
          top: 0;
        }
      }
      .column-citys {
        line-height: 44px;
        width: 640px;
        background: none;
        color: #999999;
        float: right;
        span {
          padding-left: 15px;
          padding-right: 15px;
          font-size: 14px;
        }
      }
    }
    .column-center {
      width: 1200px;
      display: flex;
      justify-content: space-between;
      .center-left {
        width: 248px;
        height: 620px;
        background-color: #036eb7;
        .activity-left {
          margin-top: -1px;
          width: 248px;
          height: 623px;
          overflow: hidden;
          background-image: url(../assets/ym-media/building-images1.png);
          background-size: 100% 100%;
          background-color: #036eb7;
          li {
            height: 38px;
            margin-top: 35px;
            line-height: 38px;
            text-align: center;
            color: white;
          }
          li:hover {
            color: #f29600;
            background-color: #c7e8fa;
          }
        }
      }
      .center-right {
        width: 927px;
        height: 623px;
        overflow: hidden;
        .centers-move {
          width: 927px;
          height: 604px;
          .column-content {
            width: 929px;
            background-color: transparent;
            display: flex;
            justify-content: space-between;
            .media-model {
              width: 224px;
              height: 291px;
              margin-top: 22px;
              margin-right: 8px;
              float: left;
              dd {
                background-color: white;
                height: 24px;
                line-height: 24px;
                padding-left: 10px;
              }
              .media-text-first {
                font-size: 14px;
                padding-top: 9px;
                overflow: hidden;
                text-overflow: clip;
                height: 24px;
              }
              .media-text-secend {
                font-size: 12px;
                color: red;
              }
              .media-text-city {
                font-size: 12px;
                color: #999999;
                padding-bottom: 6px;
                span {
                  padding-left: 15px;
                }
              }
            }
          }
        }
      }
    }
    .yingmoo-picture {
      width: 1200px;
      margin: 0 auto;
      margin-top: 30px;
      img {
        width: 100%;
      }
    }
    .yingmoo-template {
      width: 1200px;
      margin: 0 auto;
      margin-top: 30px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 247px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 26px;
          }
          .column-arrow {
            position: absolute;
            right: -26px;
            top: 0;
          }
        }
      }
      .column-content {
        width: 1200px;
        background-color: transparent;
        display: flex;
        justify-content: space-between;
        .media-model {
          width: 224px;
          height: 291px;
          margin-top: 20px;
          dd {
            background-color: white;
            height: 24px;
            line-height: 24px;
            padding-left: 10px;
          }
          .media-text-first {
            font-size: 14px;
            padding-top: 9px;
            overflow: hidden;
            text-overflow: clip;
            height: 24px;
          }
          .media-text-secend {
            font-size: 12px;
            color: red;
          }
          .media-text-city {
            font-size: 12px;
            color: #999999;
            padding-bottom: 6px;
            span {
              padding-left: 15px;
            }
          }
        }
      }
    }
  }
  .yingmoo-picture {
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
  }
  .yingmoo-template {
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
    .column-navbar {
      height: 44px;
      line-height: 44px;
      position: relative;
      &.grey {
        background-color: #e6e6e6;
      }
      .column-title {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 247px;
        color: #fbb03b;
        font-size: 18px;
        background-color: #036eb7;
        .column-icon {
          margin-left: 26px;
        }
        .column-arrow {
          position: absolute;
          right: -26px;
          top: 0;
        }
      }
    }
    .column-content {
      width: 1200px;
      background-color: transparent;
      display: flex;
      justify-content: space-between;
      .media-model {
        width: 224px;
        height: 291px;
        margin-top: 20px;
        dd {
          background-color: white;
          height: 24px;
          line-height: 24px;
          padding-left: 10px;
        }
        .media-text-first {
          font-size: 14px;
          padding-top: 9px;
          overflow: hidden;
          text-overflow: clip;
          height: 24px;
        }
        .media-text-secend {
          font-size: 12px;
          color: red;
        }
        .media-text-city {
          font-size: 12px;

          color: #999999;
          padding-bottom: 6px;
          span {
            padding-left: 15px;
          }
        }
      }
    }
  }
}
</style>
